Resizing Objects in Figma

Resizing Objects in Figma is an essential skill used to change the width, height, proportions, and overall dimensions of design elements such as shapes, images, icons, text layers, groups, frames, and components. Proper resizing helps designers create balanced, responsive, and visually consistent interfaces.

For professional Figma learning, explore JustAcademy Figma Training and practice concepts through structured design projects. You can also Register for Figma Course Demo.

1. What is Resizing Objects in Figma?

Resizing means changing the dimensions of a selected object. In Figma, you can resize an object by changing its width and height fields, dragging its edges or corners, using the Lock Aspect Ratio option, or using the Scale tool when the entire object and its contents need to scale proportionally.

For example, a rectangle with a width of 200px and height of 100px can be resized to 400px × 200px. If its proportions are preserved, the object becomes twice as large without becoming distorted.

Original Object

Width  = 200px
Height = 100px
        ↓
Resize
        ↓
New Object
Width  = 400px
Height = 200px
        ↓
Same 2:1 proportion

2. Why is Object Resizing Important?

• It helps create layouts with accurate dimensions.
• It allows designers to adapt components to different screen sizes.
• It helps maintain consistent spacing and proportions.
• It allows images and illustrations to be resized without unwanted distortion.
• It helps create different versions of the same UI element.
• It is useful when designing responsive websites and mobile applications.
• It makes it easier to prepare assets for different platforms and screen sizes.
• It helps designers quickly modify existing UI components.

3. Types of Resizing in Figma

Figma provides several ways to change the size of objects. The appropriate method depends on whether you want to change only the object's dimensions or scale the complete object and its contents.

4. Selecting an Object Before Resizing

Before resizing an object, select it using the Move tool or click the required layer in the Layers panel. Once selected, Figma displays a bounding box around the object.

Select Object

      ↓
Bounding Box Appears
      ↓
Choose Resize Method
      ↓
Drag Handle / Enter W & H / Use Scale Tool
      ↓
Object Resized

Common Selection Methods

• Click an object directly on the canvas.
• Select the layer from the Layers panel.
• Use Shift-click to select multiple objects.
• Select a frame to resize the complete container.
• Select a group when multiple layers need to be handled together.

5. Manual Resizing Using Bounding Box

The simplest method is to select an object and drag one of its bounding box handles. You can drag a side to change one dimension or a corner to change both width and height.

Steps

1. Select the object.
2. Move the cursor to an edge or corner of the bounding box.
3. Click and drag the handle.
4. Release the mouse when the required size is reached.

        Width

←────────────────→
┌──────────────────┐
│                  │
│      Object      │ Height
│                  │
└──────────────────┘
        ↑
    Drag Corner
    to change
    Width + Height

6. Resizing Width Only

You can change only the width of an object by dragging its left or right edge. This is useful for buttons, cards, input fields, containers, and horizontal sections.

Before:

┌──────────────┐
│    Button    │
└──────────────┘
 
After Width Resize:
┌──────────────────────────┐
│          Button          │
└──────────────────────────┘

Changing only the width can alter the aspect ratio of an object when the height remains unchanged.

7. Resizing Height Only

You can change only the height by dragging the top or bottom edge. This is useful for cards, panels, containers, banners, and sections.

Before:

┌──────────────┐
│              │
│    Card      │
│              │
└──────────────┘
 
After Height Resize:
┌──────────────┐
│              │
│              │
│    Card      │
│              │
│              │
└──────────────┘

8. Resizing From a Corner

Dragging a corner allows both width and height to change simultaneously. This method is commonly used when resizing images, illustrations, cards, and shapes.

If the aspect ratio is not locked, changing both dimensions independently can distort the object.

Original

┌──────────────┐
│              │
│    Image     │
│              │
└──────────────┘
             ↘
          Drag Corner
             ↘
┌────────────────────────┐
│                        │
│         Image          │
│                        │
└────────────────────────┘

9. Lock Aspect Ratio

Lock Aspect Ratio keeps the relationship between the width and height of an object while resizing. This is particularly useful for images, logos, icons, illustrations, and other objects that should not become stretched.

For example, an image with a 16:9 ratio should continue to maintain that ratio when resized.

Why Use Aspect Ratio Lock?

• Prevents image distortion.
• Maintains consistent proportions.
• Useful for logos and icons.
• Useful for responsive visual assets.
• Helps maintain professional visual quality.

10. Changing Width and Height From the Properties Panel

Figma allows you to enter exact width and height values in the right sidebar. This is useful when a design requires pixel-perfect dimensions.

Example

Selected Object

W = 300
H = 150
 
Change W:
W = 500
 
Result:
W = 500
H = 150

When aspect ratio is locked, changing one dimension updates the other dimension proportionally.

Example With Locked Ratio

Original:

W = 200
H = 100
 
Set W = 400
 
Figma calculates:
H = 200
 
Result:
400 × 200

11. Using Calculations in Dimension Fields

Figma dimension fields can be used for quick calculations. Instead of manually calculating a new value, you can enter mathematical expressions such as addition, subtraction, multiplication, or division.

Current Width = 300

 
300 + 100
Result = 400
 
300 - 50
Result = 250
 
300 * 2
Result = 600
 
300 / 2
Result = 150

This is useful when creating consistent dimensions and quickly adjusting multiple design elements.

12. Resizing With the Scale Tool

The Scale tool is designed for proportional scaling of layers and objects. It preserves the aspect ratio and scales the object's contents along with it. The Scale tool can be activated with the K keyboard shortcut.

Steps

1. Select the Scale tool or press K.
2. Select the object or layer.
3. Move to the object's bounding box.
4. Drag a corner to scale the object.
5. Release the mouse when the desired size is reached.

Press K

   ↓
Select Object
   ↓
Scale Tool Activated
   ↓
Drag Corner
   ↓
Object + Contents Scale Together
   ↓
Final Proportional Design

The Scale tool is especially useful when an object contains multiple layers, text, strokes, effects, or nested elements that should scale together.

13. Manual Resize vs Scale Tool

14. Resizing Images

Images are commonly resized when creating profile cards, banners, product pages, social media designs, advertisements, and website layouts.

Best Practice

Use proportional scaling when the entire image needs to become larger or smaller without distortion. Locking the aspect ratio is also useful when changing exact width and height values.

Original Image

800 × 600
    ↓
50% Scale
    ↓
400 × 300
    ↓
Same Aspect Ratio

15. Resizing Shapes

Basic shapes such as rectangles, circles, polygons, and other vector objects can be resized directly from their bounding boxes or through dimension fields.

Example: Rectangle

Original:

W = 200px
H = 100px
 
Resize:
W = 400px
H = 200px
 
Result:
Double-sized rectangle
with the same proportion

When creating UI components, exact dimensions are often preferable because buttons, cards, inputs, and containers frequently follow a defined design system.

16. Resizing Circles and Ellipses

When working with circles, maintaining equal width and height is important if the object needs to remain a perfect circle.

Circle:

W = 100px
H = 100px
 
Correct Resize:
W = 200px
H = 200px
 
Incorrect Resize:
W = 250px
H = 150px
 
Result:
The second object becomes an ellipse.

Use proportional resizing when the circular shape must remain circular.

17. Resizing Text Objects

Text layers behave differently from simple shapes. You can change the text layer's dimensions and resizing behavior, while the Scale tool can resize both the text layer bounds and font size together.

Common Text Resizing Situations

• Changing the text layer width to control wrapping.
• Changing font size to make text larger or smaller.
• Using Auto Width when text should grow horizontally.
• Using Fixed Size when the text needs a controlled bounding box.
• Using the Scale tool when the entire text-containing design must scale proportionally.

Text Layer

   ↓
Change Width
   ↓
Text may Wrap
   ↓
Change Font Size
   ↓
Text Becomes Larger/Smaller
   ↓
Scale Tool
   ↓
Bounds + Font Size Scale Together

18. Resizing Frames

Frames are containers for design elements. A frame can be resized manually, through width and height fields, by changing a preset, or by using resize-to-fit behavior.

Example

Mobile Frame

375 × 812
     ↓
Resize
     ↓
Tablet Frame
768 × 1024
     ↓
Update Layout
     ↓
Responsive Screen Design

When resizing frames, child layers may respond according to their constraints or layout settings. Auto Layout can also control how content adapts inside a frame.

19. Resize to Fit

Resize to Fit allows a frame to adjust its dimensions around the outermost bounds of its child objects. This is useful when a frame needs to closely fit its content.

Before:

┌──────────────────────────────┐
│                              │
│      ┌──────────────┐        │
│      │    Content   │        │
│      └──────────────┘        │
│                              │
└──────────────────────────────┘
 
Resize to Fit:
┌──────────────────┐
│     Content      │
└──────────────────┘

20. Resizing Groups

Groups allow multiple objects to be selected and handled together. When resizing grouped elements, consider whether you want to change the group's dimensions or proportionally scale the entire collection.

Example

Group

 ├── Logo
 ├── Heading
 ├── Button
 └── Icon
      ↓
Resize / Scale
      ↓
Complete Design Element

For complex responsive UI structures, Frames and Auto Layout are generally more suitable than relying only on groups.

21. Resizing Multiple Objects

You can select multiple layers and modify their dimensions or scale them together. This is useful when several elements need to be adjusted as a set.

Example

Select:

┌──────────┐   ┌──────────┐
│  Image   │   │  Text    │
└──────────┘   └──────────┘
      ↓
Multiple Selection
      ↓
Resize / Scale
      ↓
All Selected Elements Updated

When several objects need to maintain their internal relationships, the Scale tool can be useful because it scales the selection as a proportional design.

22. Resizing With Constraints

Constraints define how layers behave when their parent frame changes size. They are useful when creating interfaces that need to adapt to different frame dimensions.

23. Resizing With Auto Layout

Auto Layout is useful when a component should respond automatically to content and available space. Instead of manually resizing every child layer, Auto Layout can control spacing, padding, direction, and sizing behavior.

Button

┌───────────────────────┐
│     Buy Now           │
└───────────────────────┘
        ↓ Add Text
┌────────────────────────────┐
│     Buy Now Product        │
└────────────────────────────┘
        ↓
Auto Layout adjusts
padding + size + spacing

Auto Layout Is Useful For

• Buttons
• Navigation bars
• Cards
• Forms
• Lists
• Menus
• Responsive components

24. Resizing Components

Components can be resized depending on their structure and layout settings. When designing reusable components, define suitable dimensions, constraints, and Auto Layout behavior so the component remains usable at different sizes.

Example: Button Component

Default Button

Width  = 120px
Height = 48px
 
Large Button
Width  = 180px
Height = 56px
 
Responsive Button
Width changes based on content
Height controlled by Auto Layout

25. Anchor Point and Scaling Direction

The Scale tool provides an anchor point that determines which point remains fixed while scaling. This is useful when a design needs to expand from a specific side or corner.

Anchor: Center

        ↓
Object expands
in all directions
 
Anchor: Top-Left
        ↓
Top-left stays fixed
Object expands
toward bottom-right

Choosing the correct anchor point can make controlled scaling easier, especially when working with exact layouts.

26. Snap Settings While Resizing

Figma provides snapping behavior that can help align objects while resizing or moving them. Snap-to-object and pixel-grid behavior can help maintain accurate positioning and reduce small alignment errors.

Benefits

• Helps align edges.
• Helps align centers.
• Reduces accidental misalignment.
• Useful for pixel-accurate interface design.
• Helps maintain consistent spacing.

27. Resizing a Login Form

Consider a login form containing a logo, heading, input fields, and a button. Instead of manually resizing every element, use a frame with Auto Layout and appropriate sizing rules.

Login Frame

│
├── Logo
├── Heading
├── Email Input
├── Password Input
└── Login Button
        ↓
Resize Parent Frame
        ↓
Layout adapts according to
Auto Layout / Constraints

28. Practical Example: Resizing a Product Card

A product card may contain an image, product name, description, price, and button. The card can be designed with Auto Layout so that content and spacing remain organized when dimensions change.

Product Card

┌─────────────────────────┐
│       Product Image     │
├─────────────────────────┤
│ Product Name            │
│ Short Description       │
│ ₹1,499                  │
│ [ Add to Cart ]         │
└─────────────────────────┘
              ↓
Resize Card
              ↓
Image + Text + Button
remain organized

29. Practical Example: Resizing a Website Banner

Suppose a website banner is designed at 1440 × 500. You may need another version at 1200 × 420 or 768 × 320. The designer must consider the image, text, button, spacing, and responsive behavior.

Desktop Banner

1440 × 500
     ↓
Tablet Banner
768 × 320
     ↓
Mobile Banner
390 × 300
     ↓
Review:
Image
Text
Button
Spacing
Alignment

30. Resizing Icons and Logos

Icons and logos should normally retain their original proportions. Distorting a logo by changing width and height independently can make the design look incorrect.

Best Practice

• Maintain the original aspect ratio.
• Use the Scale tool for proportional scaling.
• Use exact dimensions when a design system requires them.
• Check alignment after resizing.
• Review the design at the final export size.

31. Resizing Without Distortion

Distortion occurs when an object's width and height are changed independently and its original proportion is not preserved.

Original Logo

┌──────────────┐
│     LOGO     │
└──────────────┘
 
Incorrect:
Width ↑↑↑
Height ↑
Result → Stretched Logo
 
Correct:
Width ↑↑
Height ↑↑
Result → Proportional Logo

32. Common Resizing Mistakes

• Stretching images without preserving their proportions.
• Changing a logo's width and height independently.
• Using manual resizing when the complete design should scale proportionally.
• Ignoring Auto Layout when building responsive components.
• Ignoring constraints when resizing parent frames.
• Changing text dimensions when the actual requirement is to change font size.
• Using arbitrary dimensions instead of a consistent design system.
• Forgetting to check the final design at different screen sizes.
• Scaling complex interfaces without checking text readability.

33. Best Practices for Resizing Objects

1. Use exact W and H values for pixel-perfect designs.
2. Use aspect ratio locking for images, logos, and icons.
3. Use the Scale tool when the entire design needs proportional scaling.
4. Use Auto Layout for content-driven components.
5. Use constraints when child elements need predictable behavior inside a frame.
6. Use consistent spacing and dimensions from the design system.
7. Check resized designs at multiple viewport sizes.
8. Review typography after scaling.
9. Check strokes, corner radius, shadows, and effects after scaling.
10. Test components before using them throughout a large project.

34. Resizing Workflow in Figma

Start

  ↓
Select Object
  ↓
Identify Requirement
  ↓
Need Exact Dimensions?
  ├── Yes → Edit W / H
  └── No
       ↓
Need Same Proportion?
  ├── Yes → Lock Aspect Ratio / Scale Tool
  └── No → Manual Resize
       ↓
Is It a Responsive Component?
  ├── Yes → Auto Layout / Constraints
  └── No → Normal Resize
       ↓
Check Alignment
       ↓
Check Spacing
       ↓
Check Typography
       ↓
Final Review

35. Resizing Objects: Quick Comparison

36. Practical Project: Responsive Profile Card

Create a profile card containing a profile image, name, job title, description, and button. Start with a desktop-sized card and then create smaller versions for tablet and mobile layouts.

Project Steps

1. Create a card frame.
2. Add a profile image.
3. Add name and job title.
4. Add a description.
5. Add a button.
6. Apply Auto Layout where appropriate.
7. Set suitable spacing and padding.
8. Resize the card to different widths.
9. Check image proportions.
10. Check text wrapping.
11. Check button dimensions.
12. Review the final responsive behavior.

37. Interview Questions

Q1. What does resizing mean in Figma?

Resizing means changing the dimensions of a layer or object, such as its width and height.

Q2. What is the difference between resizing and scaling?

Resizing changes the dimensions of an object, while the Scale tool proportionally scales an object and its contents together.

Q3. What is the shortcut for the Scale tool?

The Scale tool can be activated using the K shortcut.

Q4. Why should you lock the aspect ratio?

Locking the aspect ratio maintains the original width-to-height relationship and helps prevent distortion.

Q5. When should you use the Scale tool?

Use the Scale tool when you want to proportionally resize an object or a collection of layers while scaling their contents consistently.

Q6. How can you set an exact object size?

Select the object and enter the required Width and Height values in the right-side properties panel.

Q7. What is Auto Layout used for?

Auto Layout helps components and layouts adapt automatically based on content, spacing, padding, and available dimensions.

Q8. What are constraints?

Constraints define how child layers behave when their parent frame changes size.

Q9. Why can manually resizing text be different from scaling text?

Changing the text layer's dimensions can affect wrapping and the text bounding box, while scaling the text layer with the Scale tool also scales the font size.

Q10. How do you resize a frame to fit its content?

Use the Resize to Fit option so the frame adjusts around the outermost bounds of its child objects.

38. Quick Revision

• Resizing changes the dimensions of an object.
• Width and Height fields are useful for exact dimensions.
• Lock Aspect Ratio helps preserve proportions.
• The Scale tool uses the K shortcut.
• Scale is useful for proportionally scaling complete designs.
• Frames can be resized manually or through dimension controls.
• Resize to Fit adjusts a frame around its contents.
• Constraints control child behavior when parent frames resize.
• Auto Layout is useful for responsive and content-driven components.
• Always check images, typography, spacing, strokes, and effects after resizing.

39. Resizing Objects Checklist

• ☐ Select the correct object or frame.
• ☐ Decide whether to resize or scale.
• ☐ Check the aspect ratio requirement.
• ☐ Use exact dimensions when necessary.
• ☐ Use the Scale tool for proportional complete-design scaling.
• ☐ Check Auto Layout behavior.
• ☐ Check constraints.
• ☐ Check text wrapping and font size.
• ☐ Check image and logo proportions.
• ☐ Check spacing and alignment.
• ☐ Test the design at different sizes.
• ☐ Review the final exported design.

40. Conclusion

Resizing Objects is one of the fundamental skills every Figma designer should understand. Figma provides multiple resizing methods, including manual resizing, exact Width and Height controls, aspect-ratio locking, the Scale tool, Resize to Fit, Constraints, and Auto Layout. Choosing the correct method depends on whether you need to change dimensions, preserve proportions, scale complete designs, or create responsive components.

With regular practice, designers can resize shapes, images, text, frames, groups, components, and complete UI layouts accurately while maintaining consistency and visual quality. To learn Figma systematically, visit JustAcademy Figma Training and Register for Figma Course Demo.